<template>
  <div class="view-content config-home" v-loading="loading">
    <div class="header">
      <p class="YouSheBiaoTiHei">
        {{ name }}
      </p>
    </div>
    <div class="main-content">
      <div class="scroll-parent">
        <el-scrollbar>
          <div class="main-grid">
            <div
              v-for="item in getMainList"
              :key="item.id"
              class="grid-item"
              :style="gridArea(item.normsVal)"
            >
              <iframe v-if="load" :src="item.component" frameborder="0" />
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getEnableConfig } from '@/api/system'
import { MainType, getGridData } from '@/views/system/configStep/composables'
import { computed, ref } from 'vue'
const loading = ref(false)
// 获取grid参数
const { load, gridArea, client } = getGridData('.config-home .scroll-parent')

// 渲染数据
const name = ref('')
const mainList = ref<MainType[]>([])
const getMainList = computed(() => {
  let slice = 0
  mainList.value.forEach((item, index) => {
    if (item.component) {
      slice = index
    }
  })
  return mainList.value.slice(0, slice + 1)
})
const initConfig = async () => {
  loading.value = true
  const data = await getEnableConfig()
  name.value = data.name
  mainList.value = JSON.parse(data.mainJson) || []
  loading.value = false
}
initConfig()
</script>

<script lang="ts">
export default {
  name: 'Index'
}
</script>
<style lang="scss" scoped>
.config-home {
  display: flex;
  flex-direction: column;
  background: #161D26;
  .header {
    height: 60px;
    width: 100%;
    background: url('@/assets/temp/header.png') 0 0 no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    cursor: pointer;
    p {
      display: flex;
      align-items: center;
      font-size: 44px;
      letter-spacing: 1px;
      background: linear-gradient(to bottom, #fff, #B4CFF2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .main-content {
    flex: 1;
    padding: v-bind("client.gap + 'px'");
    padding-bottom: 0;
    overflow: hidden;
    .scroll-parent {
      width: 100%;
      height: 100%;
      :deep(.el-scrollbar__bar.is-vertical) {
        display: none!important;
      }
    }
    .main-grid {
      width: max-content;
      min-width: 100%;
      height: 100%;
      display: grid;
      box-sizing: border-box;
      grid-template-columns: repeat(auto-fill, v-bind("client.w + 'px'"));
      grid-template-rows: repeat(v-bind("client.scale"), v-bind("client.h + 'px'"));
      grid-auto-columns: v-bind("client.w + 'px'");
      grid-auto-rows: v-bind("client.h + 'px'");
      grid-auto-flow: column dense;
      grid-gap: v-bind("client.gap + 'px'");
      .grid-item {
        position: relative;
        width: 100%;
        height: 100%;
        > iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
